<template>
  <div class="jingxuan" @scroll="gun" ref="gunju">
      <div class="top" >
        <span>新晋佳片</span>
      </div>
      
      <div class="centent" v-for="(item,index) in getcentent" :key="index">
        <div class="centent-top">
          <img class="im1" :src="item.author.userinfo.avatar" alt="">
          <span class="sp1">{{item.author.userinfo.username}} <img class="im3" v-if="item.author.userinfo.is_freelancer" src="../assets/vip.png" alt=""></span>
          
          <div class="centent-left">
            <span class="sp4" v-if="item.author.userinfo.is_vmovier_migrate_user===false">+关注</span>
          <img class="im2" src="../assets/竖着.png" alt="">
          </div>
         
        </div>
        <div class="centent-text">
          <span>{{item.title}}</span>
        </div>

        <div class="centent-audio">

          <img class="im1" :src="item.cover" alt="">
          <div class="centent-bottom">
              <div class="cang">
                <img src="../assets/星星 .png" alt="">
                <span>{{item.count.count_collect}}</span>
              </div>

              <div class="pinglun">
                <img src="../assets/评论小.png" alt="">
                <span>{{item.count.count_comment}}</span>
              </div>

               <div class="zan">
                <img src="../assets/点赞黑.png" alt="">
                <span>{{item.count.count_like}}</span>
              </div>
          </div>
        </div>
      </div>

      <div class="centent" v-for="(item,index) in getnextcentent"  :key="index+`a`">
        <div class="centent-top">
          <img class="im1" :src="item.author.userinfo.avatar" alt="">
          <span class="sp1">{{item.author.userinfo.username}}</span>
          <div class="centent-left">
             <span class="sp4" v-if="item.author.userinfo.is_vmovier_migrate_user===false">+关注</span>
          <img class="im2" src="../assets/竖着.png" alt="">
          </div>
         
        </div>
        <div class="centent-text">
          <span>{{item.title}}</span>
        </div>

        <div class="centent-audio">
          <img class="im1" :src="item.cover" alt="">
          <div class="centent-bottom">
              <div class="cang">
                <img src="../assets/星星 .png" alt="">
                <span>{{item.count.count_collect}}</span>
              </div>

              <div class="pinglun">
                <img src="../assets/评论小.png" alt="">
                <span>{{item.count.count_comment}}</span>
              </div>

               <div class="zan">
                <img src="../assets/点赞黑.png" alt="">
                <span>{{item.count.count_like}}</span>
              </div>
          </div>
        </div>
      </div>

      

  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  created(){
     this.getjingxuan()
     
  },
   data(){
     return{
        gettitle:[],
        getcentent:[],
        getnextcentent:[],
        text:[],
        text2:[],
        num:11,
        nextnum:15,

        id:[],
        video:[],
     }
   },
   methods:{

      //触底的事件
    gun() {
      if (
        this.$refs.gunju.scrollHeight -
          Math.ceil(this.$refs.gunju.scrollTop) ===
        this.$refs.gunju.clientHeight
      ) {
      
        this.num=this.num+6
        this.nextnum=this.nextnum+6
        this.getnextmessage(this.num,this.nextnum)
      }
    },

     getjingxuan(){
       this.axios({
         method:'get',
         url:'https://apis.netstart.cn/xpc/home/mustSee',
         params:{

         }
       }).then(result=>{
          
           if(result.status===200){
             this.text=result.data.data.children
             for(let i=0;i<this.text.length;i++){
              
               if(this.text[i].type==="mTitle" ){
                 this.gettitle.push(this.text[i].model)
               }
             }

             for(let j=1;j<=10;j++){
                 this.getcentent.push(this.text[j].children[0].model.resource)
             }
              
    
              
           }
           
       }).catch(err=>{
       
       })
     },

    //触底加载的数据
    getnextmessage(num,nextnum){
      this.axios({
        method:'get',
        url:'https://apis.netstart.cn/xpc/home/mustSee',
        params:{
       
        }
      }).then(result=>{
        if(result.status===200){
          this.text2=result.data.data.children
            for(let h=num;h<nextnum;h++){
              if(this.text2[h]===undefined){
                Toast("无更多内容")
                return
              }
               if(this.text2[h].type==="uiBigCard"){
                 this.getnextcentent.push(this.text[h].children[0].model.resource)
               }

            }
             
            
        }
      }).catch(err=>{
       
      })
    },

    //通过文章id拿视频
    // getvideo(id){
    //  this.axios({
    //    method:'get',
    //    url:'https://apis.netstart.cn/xpc/article/'+id,
    //  }).then(result=>{
    //   
    //    if(result.status===200){
    //      this.video.push(result.data.data.video.content.progressive[0].https_url)
    //    }
    //    
    //  }).catch(err=>{
    //    
    //  })
    // }
    
   }
}
</script>

<style lang="less" scoped>
 .jingxuan{
   width: 95%;
  height: calc(100vh - 94px);
   overflow-y: auto;
   padding :10px;
   background-color: rgb(242, 242, 242);
   .centent{
   width: 100%;
   height: 280px;
   border-radius: 10px;
   margin-top: 10px;
   background-color: white;
    
   .centent-top{
     width: 95%;
     height: 35px;
     display: flex;
     margin-left: 15px;
     line-height: 30px;
     position: relative;
     
     .centent-left{
       position:absolute;
       left: 260px;
     .im2{
       width: 20px;
       height: 25px;
       position: absolute;
       top:3px;
       left: 45px;
     }
      .sp4{
       font-size: 13px;
      
       color: rgb(235,107,99) ;
     }
     }
     .im1{
       width: 30px;
       height: 30px;
       border-radius: 50%;
    
     }
     .im3{
       width: 15px;
       height: 15px;
       position: relative;
       top:2px
     }
    
     .sp1{
       font-size: 15px;
       font-weight: bold;
       color: black;
       margin-left: 5px;
        text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
     }
    
   }
   .centent-text{
     width: 90%;
     height: 35px;
     line-height: 35px;
    
     margin-left: 15px;
     span{
       font-size: 15px;
       font-weight: bold;
        text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
     }
   }

   .centent-audio{
     width: 100%;
     height: 210px;
    
     
     .im1{
       width: 100%;
       height: 170px;
       
     
     }
     .centent-bottom{
       width: 100%;
       height: 30px;
       margin-top: 10px;
       display: flex;
       justify-content: center;
       .cang{
         width: 33%;
         height: 30px;
         display: flex;
         justify-content: center;
         img{
           width: 15px;
           height: 15px;
         }
        span{
           margin-top: 2px;
           margin-left: 5px;
         }
       }

       .pinglun{
         width: 33%;
         height: 30px;
         display: flex;
          justify-content: center;
         img{
           width: 15px;
           height: 15px;
         }
         span{
           margin-top: 2px;
           margin-left: 5px;
         }
       }

       .zan{
         width: 33%;
         height: 30px;
         display: flex;
          justify-content: center;
         img{
           width: 15px;
           height: 15px;
         }
          span{
           margin-top: 2px;
           margin-left: 5px;
         }
       }
     }
   }
 }
 }

 .top{
   width: 90%;
   height: 50px;
   margin-top: 0px;
   line-height: 50px;
  
  span{
     letter-spacing: 1px;
     font-size: 20px;
     font-weight: bold;
   }
 }

  
 
</style>